import * as React from 'react';
import * as ReactDOM from 'react-dom';
class Dialog extends React.Component{
  state = {show: false};
  componentDidMount() {
    document.addEventListener("click",  () => {
      this.setState({show: false}); //由于事件冒泡 你点击[显示]后 并不会显示, 而是在这里马上又设置为false了
    });
  }
  handleButtonClick = (event) => {
    //event.stopPropagation(); //阻止向上冒泡 但不会阻止本级的（你同一个元素同一个事件可以绑定多个事件函数）
    event.nativeEvent.stopImmediatePropagation(); // 阻止向上冒泡 本级后面的也会被阻止, 由于16.x是把事件统一绑定到document上的,故应该用这个
    this.setState({show: true});
  };

  render() {
    return (
      <div>
        <button onClick={this.handleButtonClick}>显示</button>
        {this.state.show && (
          <div onClick={(event) => event.nativeEvent.stopImmediatePropagation()}>
            Modal
          </div>
        )}
      </div>
    );
  }
}
ReactDOM.render(<Dialog />, document.getElementById('root'));
